<script setup>
import {reactive, ref} from "vue";
  import coachApi from "@/api/coachApi.js";
import {Iphone, Search} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import adminApi from "@/api/adminApi.js";
  /*获取所有教练信息*/
  let coachs = ref([])
  const pageInfo = reactive({
    pageNum : 1,
    pageSize : 5,
    total : 0,
    name:'',
    phone:''
  })
  loadCoach()
  function loadCoach(){
    coachApi.getAllCoach(pageInfo).then(response=>{
        coachs.value=response.data.list
        pageInfo.total=response.data.total
    })
  }
  /*搜索查询*/
  function onSearch(){
    loadCoach()
  }
  /*改变每页大小*/
  function handleSizeChange(val){
    pageInfo.pageSize = val
    loadCoach()
  }
  /*改变当前页*/
  function handleCurrentChange(val){
    pageInfo.pageNum = val
    loadCoach()
  }
  /*显示添加模态框*/
  let dialogFormVisible = ref(false)
  function showCoachBox(){
    dialogFormVisible.value=true
  }
  /*添加教练*/
  let addCoachData = reactive({
    photo:'',
    name:'',
    phone:'',
    wechat:'',
    recomm:''
  })
    /*上传图片*/
  let imageUrl = ref('')
  function handleAvatarSuccess(response){
    imageUrl.value=response.data
    addCoachData.photo=response.data
  }
  /*校验手机号*/
  function checkPhone(phone){
  const regex = /^1[3-9]\d{9}$/;
  if (!regex.test(phone)) {
    ElMessage.error('请输入有效的手机号')
    addCoachData.phone=''
    return false;
  }
  if (phone !== ''){
    coachApi.checkPhone(phone)
        .then(response=>{
          if (response.code===402){
            ElMessage.error(response.msg)
            addCoachData.phone=''
          }
        })
  }
  return true
}
  function addCoach(){
    if(addCoachData.photo ==='' || addCoachData.photo ===null){
      ElMessage.error('照片不能为空')
      return;
    }
    if(addCoachData.name ==='' || addCoachData.name ===null){
      ElMessage.error('姓名不能为空')
      return
    }
    checkPhone(addCoachData.phone)
    if(addCoachData.wechat ==='' || addCoachData.wechat ===null){
      ElMessage.error('微信不能为空')
      return
    }
    if(addCoachData.recomm ==='' || addCoachData.recomm ===null){
      ElMessage.error('简介不能为空')
      return
    }
    coachApi.addCoach(addCoachData).then(response=>{
      if (response.code === 200) {
        ElMessage.success('添加成功')
        addCoachData.photo=''
        addCoachData.name=''
        addCoachData.phone=''
        addCoachData.wechat=''
        addCoachData.recomm=''
        imageUrl.value=''
        dialogFormVisible.value=false
        loadCoach()
      }else{
        ElMessage.error(response.msg)
      }
    }).catch(()=>ElMessage.error('请求异常'))
  }
  /*删除教练*/
  function deleteCoach(coach){
    ElMessageBox.confirm(
      '确定要删除吗？',
      '警告',
        {
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type : 'warning'
        }
    ).then(()=>{
      coachApi.deleteCoach(coach.id)
          .then(resp=>{
            if (resp.code===200){
              ElMessage.success('删除成功')
              loadCoach()
            }else{
              ElMessage.error(resp.msg)
            }
          }).catch(()=>{
            ElMessage.error('请求异常')
      })
    })
  }
  /*编辑*/
  /*显示编辑模态框*/
  let dialogFormVisible2 = ref(false)
  let editCoachData = reactive({})
  function showEditCoach(coach){
    dialogFormVisible2.value = true
    editCoachData=coach
  }
  /*上传修改后的照片*/
  function handleEditAvatarSuccess(resp){
    console.log("修改后的照片",resp.data)
    editCoachData.photo = resp.data
  }
  /*校验编辑的手机号*/
  function checkEditPhone(){
    const regex = /^1[3-9]\d{9}$/;
    if (!regex.test(phone)) {
      ElMessage.error('请输入有效的手机号')
      editCoachData.phone=''
      return false;
    }
    if (editCoachData.phone===''){
      ElMessage.error('手机号为空')
      return false;
    }
    coachApi.checkEditPhone(editCoachData).then(resp=>{
      if (resp.code === 402) {
        ElMessage.error('手机号存在')
        return false
      }
    }).catch(()=>{
      ElMessage.error('请求异常')
      return false
    })
    return true
  }
  function editCoach(){
    coachApi.editCoach(editCoachData).then(resp=>{
      if (resp.code===200){
        ElMessage.success('编辑成功')
        dialogFormVisible2.value = false
        location.reload()
      }else{
        ElMessage.error(code.msg)
      }
    }).catch(()=>ElMessage.error('请求异常'))
  }
  /*批量删除*/
  const ids = ref([])
  function handleSelectionChange(val){
    ids.value=[]
    val.forEach(item=>{
      ids.value.push(item.id)
    })
  }
  function delSelected(){
    if (ids.value.length===0){
      ElMessage.error('所选项不能为空')
      return
    }
    ElMessageBox.confirm(
        '确定删除吗？',
        '警告',
        {
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type : 'warning'
        }
    ).then(()=>{
      coachApi.delSelected(ids.value).then(resp=>{
          if(resp.code===200){
            ElMessage.success('删除成功');
            loadCoach()
          }else{
            ElMessage.error(resp.msg)
          }
      }).catch(()=>ElMessage.error('请求异常'))
    })
  }

</script>
<template>
  <!-- 根据姓名和手机号搜索 -->
  <div class="flex gap-4 mb-4">
    &nbsp;&nbsp;
    <span>手机号</span>
    <el-input
        v-model="pageInfo.phone"
        style="width: 240px"
        placeholder="请输入手机号"
        :suffix-icon="Iphone"
    />
    &nbsp;&nbsp;
    <span>姓名</span>
    <el-input
        v-model="pageInfo.name"
        style="width: 240px"
        placeholder="请输入姓名"
    />
    &nbsp;&nbsp;
    <el-button @click="onSearch"><el-icon><Search /></el-icon></el-button>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <!-- 添加教练按钮 -->
    <el-button type="success" @click="showCoachBox">创建教练</el-button>
  </div>
  <!-- 批量删除 -->
  <div>
    <el-button type="danger" @click="delSelected">删除所选项</el-button>
  </div>
  <!--展示教练列表-->
  <div>
    <el-table
        ref="multipleTableRef"
        :data="coachs"
        row-key="id"
        fit
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column type="index" label="编号" width="50" />
      <el-table-column property="name" label="姓名" width="120" />
      <el-table-column property="phone" label="手机号" width="120" />
      <el-table-column property="wechat" label="微信" width="120" />
      <el-table-column property="recomm" label="简介" min-width="100" />
      <el-table-column prop="photo" label="照片" width="120px">
        <template #default="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.photo"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[scope.row.photo]"
              show-progress
              :initial-index="4"
              :preview-teleported="true"
              fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="showEditCoach(scope.row)">编辑</el-button>
          <el-button type="warning" @click="deleteCoach(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 分页 -->
  <div>
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="pageInfo.pageNum"
          v-model:page-size="pageInfo.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          :size='"default"'
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
<!-- 添加教练 -->
  <el-dialog v-model="dialogFormVisible" title="添加教练" width="500">
    <el-form :inline="true" :model="addCoachData" class="demo-form-inline">
          <el-form-item label="上传图片">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:9001/upload/savePic"
                :auto-upload="autoUpload"
                name="imgFile"
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
              <el-image :src="imageUrl"/>
            </el-upload>
          </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="addCoachData.phone" placeholder="请输入手机号" clearable @blur="checkPhone(addCoachData.phone)" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="addCoachData.name" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item label="微信">
          <el-input v-model="addCoachData.wechat" placeholder="请输入微信" clearable />
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="addCoachData.recomm" placeholder="请输入简介" clearable />
        </el-form-item>
      </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addCoach">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>
<!-- 编辑教练 -->
  <el-dialog v-model="dialogFormVisible2" title="编辑教练" width="500">
    <el-form :inline="true" :model="editCoachData" class="demo-form-inline">
          <el-form-item label="上传图片">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:9001/upload/savePic"
                :auto-upload="autoUpload"
                name="imgFile"
                :show-file-list="false"
                :on-success="handleEditAvatarSuccess">
              <el-image :src="editCoachData.photo"/>
            </el-upload>
          </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="editCoachData.phone" placeholder="请输入手机号" clearable @blur="checkEditPhone" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="editCoachData.name" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item label="微信">
          <el-input v-model="editCoachData.wechat" placeholder="请输入微信" clearable />
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="editCoachData.recomm" placeholder="请输入简介" clearable />
        </el-form-item>
      </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取消</el-button>
        <el-button type="primary" @click="editCoach">
          编辑
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
  div{
    margin: 12px 6px;
  }
</style>